import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import { hashHistory } from 'dva/router';
import styles from '../../routes/IndexPage.css';
import { Icon, Table } from 'antd';
import { Stat,Frame,G2 } from 'g2';
import createG2 from 'g2-react';
var _state,_props,_this;

const Chart = createG2(chart => {
      chart.coord('theta');
      chart.legend('name', {
        position: 'bottom',
        itemWrap: true,
        formatter: function(val) {
          for(var i = 0, len = _props.roomData.length; i < len; i++) {
            var obj = _props.roomData[i];
            if (obj.name === val) {
              return val + ': ' + obj.value ; 
            }
          }
        }
      });
      chart.axis(false);
      chart.intervalStack().position(Stat.summary.percent('value'))
        .color('name', ['#3db1fa', '#53b481', '#edcd10', '#f828aa', '#461012'])
        .label('name')
        .style({
          stroke: '#fff',
          lineWidth: 2
        });
      chart.render();
    });

class distributionModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      forceFit: true,
      height: 260,
      plotCfg: {
        margin: [30, 20, 50, 30],
      }
    }
  }
  componentDidMount() {
    // const data = [
    //   {value:335, name:'机房1'},
    //   {value:310, name:'机房2'},
    //   {value:274, name:'机房3'},
    //   {value:235, name:'机房4'},
    //   {value:400, name:'机房5'}
    // ];
    // const Frame = G2.Frame;
    // let frame = new Frame(_props.roomData);
    // frame = Frame.sort(frame, 'value');
     this.setState({width: 420});
  }
  render() {
    _this = this;
    _props = _this.props;
    _state = _this.state;
   // console.log(_props)

    return (
      <div className={styles.distributionModal}>
        <div className={styles.usertit} style={{fontSize: 14,color: "#666",fontWeight: 700}}>
          机房设备分布
        </div>
        <div className={styles.distcont}>
          {_props.roomData.length?(
            <Chart
                data={_props.roomData}
                width={this.state.width}
                height={this.state.height}
                plotCfg={this.state.plotCfg}
                forceFit={this.state.forceFit} 
          />
          ):""}
        </div>
      </div>
    );
  }
}

module.exports = distributionModal
